renderUsername()

checkLogin()

registerLogout()

function renderOverview(overview) {
    Object.keys(overview).forEach(key => {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    })
}


function renderYearSalary(year) {
    //line
    const line = document.querySelector("#line");
    const myChart = echarts.init(line);
    const option = {
        //标题
        title: {
            text: "2023薪资走势",
            left: "12",
            top: "15"
        },
        //网络
        grid: {
            top: "20%"
        },
        yAxis: {
            //连续数据
            type: "value",
            splitLine: {
                lineStyle: {
                    type: "dashed",
                }
            }
        },
        xAxis: {
            //类目轴
            type: "category",
            axisLine: {
                lineStyle: {
                    color: "#17b3a3",
                    type: "dashed"
                }
            },
            data: year.map(v => v.month)
        },
        series: [{
            data: year.map(v => v.salary),
            //标记大小
            symbolSize: 12,
            lineStyle: {
                width: 8,
                color: {
                    type: "linear",
                    //起点
                    x: 0,
                    y: 0,
                    //结束点
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                            offset: 0,
                            color: "#ff0000"
                        },
                        {
                            offset: 1,
                            color: "#17b3a3"
                        }
                    ],
                    global: false
                }
            },
            type: "line",
            smooth: true,
            //区域填充样式
            areaStyle: {
                color: {
                    type: "linear",
                    //起点
                    x: 0,
                    y: 0,
                    //结束点
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                            offset: 0,
                            color: "#ff0000"
                        },
                        {
                            offset: 1,
                            color: "#17b3a3"
                        }
                    ],
                    global: false
                }
            }
        }],
        //提示框
        tooltip: {
            show: true,
            trigger: 'axis'
        }
    }
    myChart.setOption(option)
}



function renderSalary(salaryData) {
    const salary = document.querySelector('#salary')
    const myChart = echarts.init(salary)
    const option = {
        //标题
        title: {
            text: "班级薪资分布",
            left: '10',
            top: '15'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [{
            name: "班级薪资分布", //tooltip会用到
            type: "pie", //类型
            radius: ["55%", "70%"], //圆角半径
            itemStyle: {
                borderColor: '#fff',
                borderRadius: 15,
                borderWidth: 2
            }, //图形样式
            emphasis: {
                label: {
                    show: true,
                    fontSize: '100',
                    fontWeight: 'bold'
                }
            }, //高亮状态
            label: {
                show: true,
                position: 'center'
            }, //图形上的文本标签
            labelLine: {
                show: true
            }, //引导线样式
            avoidLabelOverlap: false, //是否启用防止标签重叠策略
            data: salaryData.map(v => {
                return {
                    value: v.g_count + v.b_count,
                    name: v.label
                }
            }) //数据

        }],
        color: [
            '#006edd',
        ] //调色盘
    }
    myChart.setOption(option)
}

function renderGroupSalary(groupData) {
    const dom = document.querySelector('#lines')
    const myChart = echarts.init(dom)

    //定义选项和数据
    const option = {
        //显示提示框
        tooltip: {

        },
        //绘制网格
        grid: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50
        },
        xAxis: {
            type: 'category',
            //默认渲染第一组数据
            data: groupData[1].map(v => v.name),
            //线的类型，颜色，文字的颜色
            axisLine: {
                lineStyle: {
                    color: '#ccc',
                    type: 'dashed'
                }
            },
            //坐标轴刻度标签的相关设置
            axisLabel: {
                color: '#999'
            }
        },
        yAxis: {
            type: 'value',
            //分割线的类型
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        //series中设置过个图形，就会渲染多个图形
        series: [{
                name: '期望薪资',
                data: groupData[1].map(v => v.hope_salary),
                type: 'bar',
                //柱状图的样式
                itemStyle: {
                    //柱状图的颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#006edd' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#0096ff' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            {
                name: '实际薪资',
                data: groupData[1].map(v => v.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#00c292' // 0% 处的颜色     
                        }, {
                            offset: 1,
                            color: '#00fcff' // 100% 处的颜色       
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    }
    //渲染图表
    myChart.setOption(option)
}


// 渲染男女薪资分布函数
function renderGenderSalary(salaryData) {
    // console.log(salaryData)

    // 初始化实例
    const dom = document.querySelector('#gender')
    const myChart = echarts.init(dom)

    // 定义选项和数据
    const option = {
        tooltip: {
            trigger: 'item'
        },
        // 颜色
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        // 标题，通过数组设置多个
        title: [{
                text: '男女薪资分布',
                left: 10,
                top: 10,
                // text属性的样式
                textStyle: {
                    // 文字的大小
                    fontSize: 16
                }
            },
            {
                text: '男生',
                left: '50%',
                top: '45%',
                textStyle: {
                    fontSize: 12
                },
                textAlign: 'center'
            },
            {
                text: '女生',
                left: '50%',
                top: '85%',
                textStyle: {
                    fontSize: 12
                },
                textAlign: 'center'
            }
        ],
        series: [{
                type: 'pie',
                radius: ['20%', '30%'],
                // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                center: ['50%', '30%'],
                data: salaryData.map(v => {
                    return {
                        value: v.b_count,
                        name: v.label
                    }
                })
            },
            {
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                data: salaryData.map(v => {
                    return {
                        value: v.g_count,
                        name: v.label
                    }
                })
            }
        ]
    }

    // 基于选项和数据绘制图表
    myChart.setOption(option)
}

// 渲染籍贯分布
function renderProvince(provinceData) {
    // console.log(provinceData)
    const dom = document.querySelector('#map')
    const myEchart = echarts.init(dom)
    const dataList = [{
            name: '南海诸岛',
            value: 0
        },
        {
            name: '北京',
            value: 0
        },
        {
            name: '天津',
            value: 0
        },
        {
            name: '上海',
            value: 0
        },
        {
            name: '重庆',
            value: 0
        },
        {
            name: '河北',
            value: 0
        },
        {
            name: '河南',
            value: 0
        },
        {
            name: '云南',
            value: 0
        },
        {
            name: '辽宁',
            value: 0
        },
        {
            name: '黑龙江',
            value: 0
        },
        {
            name: '湖南',
            value: 0
        },
        {
            name: '安徽',
            value: 0
        },
        {
            name: '山东',
            value: 0
        },
        {
            name: '新疆',
            value: 0
        },
        {
            name: '黑龙江',
            value: 0
        },
        {
            name: '浙江',
            value: 0
        },
        {
            name: '江西',
            value: 0
        },
        {
            name: '湖北',
            value: 0
        },
        {
            name: '广西',
            value: 0
        },
        {
            name: '甘肃',
            value: 0
        },
        {
            name: '山西',
            value: 0
        },
        {
            name: '内蒙古',
            value: 0
        },
        {
            name: '陕西',
            value: 0
        },
        {
            name: '吉林',
            value: 0
        },
        {
            name: '福建',
            value: 0
        },
        {
            name: '贵州',
            value: 0
        },
        {
            name: '广东',
            value: 0
        },
        {
            name: '青海',
            value: 0
        },
        {
            name: '西藏',
            value: 0
        },
        {
            name: '四川',
            value: 0
        },
        {
            name: '宁夏',
            value: 0
        },
        {
            name: '海南',
            value: 0
        },
        {
            name: '台湾',
            value: 0
        },
        {
            name: '香港',
            value: 0
        },
        {
            name: '澳门',
            value: 0
        },
    ]

    // 筛选数据
    dataList.forEach(item => {
        const res = provinceData.find(v => {
            return v.name.includes(item.name)
        })
        // console.log(res)
        // 数据赋值
        if (res !== undefined) {
            item.value = res.value
        }
    })
    // console.log(dataList)

    const option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', 'yellowgreen'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [{
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
        }, ],
    }
    myEchart.setOption(option)
}
//首页数据大屏数据接入

async function getData() {
    // try {
    const res = await axios({
        url: "/dashbord"
    })

    //res 渲染数据
    console.log(res.data)
    const {
        overview,
        year,
        salaryData,
        groupData,
        provinceData
    } = res.data

    //首页第一个模块数据渲染
    renderOverview(overview)
    //首页第二个模块数据渲染
    renderYearSalary(year)
    //首页第三个模块数据渲染
    renderSalary(salaryData)
    //首页第四个模块数据渲染
    renderGroupSalary(groupData)
    //首页第五个模块数据渲染
    renderGenderSalary(salaryData)
    //首页第六个模块数据渲染
    renderProvince(provinceData)


}
getData()